<template>
  <div class="image-container">
    <div class="image-container-left"><img src="../assets/images/1.jpg" width="200" height="100%" /></div>
    <div class="image-container-right">
      <img src="../assets/images/12.jpeg" width="150" height="50%" />
      <img src="../assets/images/10.jpeg" width="150" height="50%" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.image-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: row;

  height: 50vh;
  padding: 0.25rem;
  &-left {
    flex: 2;
    position: relative;
    left: 0;
    animation: fromLeft 1s linear 1;
  }
  &-right {
    flex: 3;
    display: flex;
    flex-direction: column;
    position: relative;
    right: 0;
    animation: fromRight 1s linear 1;
  }
}

@keyframes fromLeft {
  from {
    left: -10rem;
  }
  to {
    left: 0;
  }
}
@keyframes fromRight {
  from {
    right: -10rem;
  }
  to {
    right: 0;
  }
}
</style>
